<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>点击省份显示当前地区</title>
</head>

<style>
    body {
        background: #051930;
    }
</style>

<body>
    <div id="main" style="height: 800px;">

    </div>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        var myCharts = echarts.init(document.getElementById("main"));
        var markPointData = [{
                name: "齐齐哈尔",
                coord: [
                    120.97, 47.33
                ],
            },
            // {
            //     name: "青岛",
            //     coord: [
            //         120.33, 36.07
            //     ],

            // }, 
            // {
            //     name: "温州",
            //     coord: [
            //         110.65, 28.01
            //     ],

            // }
        ];
        var mapData = [{
            latitude: 24.5080777697,
            longitude: 109.4743093819,
            name: '1',
            value: 32358260,
            color: '#0394d9',
            coord: [
                120.33, 36.07
            ],
        }, {
            latitude: 24.4683698180,
            longitude: 109.3094042452,
            name: '2',
            value: 32358260,
            color: '#d94d02',
            coord: [
                110.65, 28.01
            ],
        }]
        var option = {
            tooltip: {
                show: true,
                formatter: "{b}"
            },
            series: [{
                type: 'map',
                coordinateSystem: 'geo',
                data: [],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: "white" //省文字颜色
                            }
                        },
                        areaStyle: {
                            color: 'blue'
                        },
                        color: '#0b4cb2',
                        borderColor: 'white' //省边界边框颜色
                    },
                    emphasis: { //鼠标hover样式
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fa4f04'
                            }
                        }
                    }
                },
                markPoint: {
                    label: {
                        normal: {
                            show: true,
                        },
                        emphasis: {
                            show: true,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'red'
                        }
                    },
                    data: markPointData
                }
            }]
        }
        myCharts.setOption(option)

        // //点击事件
        // var ecConfig = echarts.config;
        // myCharts.on(ecConfig.EVENT.CLICK, function(param) {
        //     console.log(param.name)
        //     option = {
        //         series: [{
        //             name: '中国',
        //             type: 'map',
        //             mapType: 'china|' + param.name,
        //             selectedMode: 'single', //multiple多选
        //             itemStyle: {
        //                 normal: {
        //                     label: {
        //                         show: true,
        //                         textStyle: {
        //                             color: "#231816"
        //                         }
        //                     },
        //                     areaStyle: {
        //                         color: '#B1D0EC'
        //                     },
        //                     color: '#B1D0EC',
        //                     borderColor: '#007aff' //区块的边框颜色
        //                 },
        //                 emphasis: { //鼠标hover样式
        //                     label: {
        //                         show: true,
        //                         textStyle: {
        //                             color: '#fa4f04'
        //                         }
        //                     }
        //                 }
        //             },
        //             data: [{
        //                 name: '四川',
        //                 selected: true
        //             }]
        //         }]
        //     };
        //     myCharts.clear()
        //     myCharts.setOption(option)
        // })
    </script>
</body>

</html>